<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<!-- 列表头部 -->
<div class="container">
    <!-- 两种样式的叠加 -->
    <div class="list-header flex">
        <form action="" class="flex">
            <img src="img/icon-home.png" alt="">

            <div class="inner flex">
                <input type="text" value="web前端">
                <!-- X -->
                <span>&times;</span>
            </div>
            <button>搜索</button>
        </form>
    </div>
    <!-- 过滤器 -->
    <div class="filter flex">
        <!-- active1  不显示列表 -->
        <dl class="active1">
            <dt>经验</dt>
            <dd>
                <ul>
                    <li class="active">不限</li>
                    <li>在校生</li>
                    <li>应届生</li>
                    <li>1年内</li>
                    <li>1-3年</li>
                    <li>3-5年</li>
                    <li>5-10年</li>
                    <li>10年以上 </li>
                </ul>
            </dd>
        </dl>
        <dl class="">
            <dt>学历</dt>
            <dd>
                <ul>
                    <li>不限</li>
                    <li>初中及以下</li>
                    <li>中专</li>
                    <li>高中</li>
                    <li>大专</li>
                    <li>本科</li>
                    <li>硕士</li>
                    <li>博士</li>
                </ul>
            </dd>
        </dl>
        <dl class="">
            <dt>薪资</dt>
            <dd>
                <ul>
                    <li>不限</li>
                    <li>初中及以下</li>
                    <li>中专</li>
                    <li>高中</li>
                    <li>大专</li>

                    <li>本科</li>
                    <li>硕士</li>
                    <li>博士</li>
                </ul>
            </dd>
        </dl>
        <dl class="">
            <dt>规模</dt>
            <dd>
                <ul>
                    <li>不限</li>
                    <li>初中及以下</li>
                    <li>中专</li>
                    <li>高中</li>
                    <li>大专</li>

                    <li>本科</li>
                    <li>硕士</li>
                    <li>博士</li>
                </ul>
            </dd>
        </dl>
        <dl class="">
            <dt>融资</dt>
            <dd>
                <ul>
                    <li>不限</li>
                    <li>初中及以下</li>
                    <li>中专</li>
                    <li>高中</li>
                    <li>大专</li>
                    <li>本科</li>
                    <li>硕士</li>
                    <li>博士</li>
                </ul>
            </dd>
        </dl>
    </div>
    <!-- 职位列表 -->
    <!-- <ul>无序列表</ul> -->
    <ul class="job-list">
        <li>
            <a href="" class="job-item flex">
                <img src="img/889015c97b1062c04ab63f7fb2ffdb861e1b3df98ed249a23c9acb70719fad0c.jpg" alt="">
                <div class="text">
                    <div class="title">
                        java
                        <span class="salary">15-30k</span>

                    </div>
                    <div>
                        <!-- 公司信息 -->
                        <div class="company">小米科技</div>
                        <div class="props">
                            <span>北京</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="" class="job-item flex">
                <img src="img/cff98890aeac18b0f4dee3577d92d543be1bd4a3bd2a63f070bdbdada9aad826 (1).jpg" alt="">
                <div class="text">
                    <div class="title">
                        java
                        <span class="salary">15-30k</span>

                    </div>
                    <div>
                        <!-- 公司信息 -->
                        <div class="company">小米科技</div>
                        <div class="props">
                            <span>北京</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="" class="job-item flex">
                <img src="img/designer.png" alt="">
                <div class="text">
                    <div class="title">
                        java
                        <span class="salary">15-30k</span>

                    </div>
                    <div>
                        <!-- 公司信息 -->
                        <div class="company">小米科技</div>
                        <div class="props">
                            <span>北京</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="" class="job-item flex">
                <img src="img/fe58a92227d1fb57b7dfeb95d33d3fe6ce78e146d1808d2cc5109f2ac704390c_s.jpg"" alt="">
                <div class="text">
                    <div class="title">
                        java
                        <span class="salary">15-30k</span>

                    </div>
                    <div>
                        <!-- 公司信息 -->
                        <div class="company">小米科技</div>
                        <div class="props">
                            <span>北京</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="" class="job-item flex">
                <img src="img/0bfb5ccf41d0032636a16f8ca95d1860be1bd4a3bd2a63f070bdbdada9aad826.jpg" alt="">
                <div class="text">
                    <div class="title">
                        java
                        <span class="salary">15-30k</span>

                    </div>
                    <div>
                        <!-- 公司信息 -->
                        <div class="company">小米科技</div>
                        <div class="props">
                            <span>北京</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="" class="job-item flex">
                <img src="img/0e0d441a2f93a236536f20e8277bf4dbbe1bd4a3bd2a63f070bdbdada9aad826.png" alt="">
                <div class="text">
                    <div class="title">
                        java
                        <span class="salary">15-30k</span>

                    </div>
                    <div>
                        <!-- 公司信息 -->
                        <div class="company">小米科技</div>
                        <div class="props">
                            <span>北京</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="" class="job-item flex">
                <img src="img/10003fcb37b60009adb40efe0818b67346fa0208ffed75cd5c9ac5c8e0c11e87_s.jpg" alt="">
                <div class="text">
                    <div class="title">
                        java
                        <span class="salary">15-30k</span>

                    </div>
                    <div>
                        <!-- 公司信息 -->
                        <div class="company">小米科技</div>
                        <div class="props">
                            <span>北京</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="" class="job-item flex">
                <img src="img/35de95244eb9fc821dcd844c1b3acd64be1bd4a3bd2a63f070bdbdada9aad826.jpg" alt="">
                <div class="text">
                    <div class="title">
                        java
                        <span class="salary">15-30k</span>

                    </div>
                    <div>
                        <!-- 公司信息 -->
                        <div class="company">小米科技</div>
                        <div class="props">
                            <span>北京</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>


    </ul>

</div>

<body>

</body>

</html>